<template>
  <div class="content">
    <bg-canvans></bg-canvans>
    <div class="login_wrap">
      <h1>积云学院</h1>
      <el-form>
        <el-form-item>
          <el-input placeholder="请输入用户名"
                    v-model="username">
            <template slot="prepend">
              <el-icon class="el-icon-platform-eleme"></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入密码"
                    v-model="password">
            <template slot="prepend">
              <el-icon class="el-icon-platform-eleme"></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <div class="veri_wrap">
            <el-input placeholder="请输入验证码"
                      v-model="veri">
              <template slot="prepend">
                <el-icon class="el-icon-platform-eleme"></el-icon>
              </template>
            </el-input>
            <veri></veri>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="form_btn">
            <el-button type="primary"> 忘记密码</el-button>
            <el-button type="success"
                       @click="login"> 登录</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { checkVeriApi, loginApi } from '../../api/login'
import bgCanvans from './bgCanvas'
import veri from './veri'
export default {
  name: "login",
  data () {
    return {
      username: "",
      password: "",
      veri: ""
    }
  },
  methods: {
    async login () {
      // 先调用校验验证码接口 在调用登录接口
      var veriRes = await checkVeriApi(this.veri)
      console.log(veriRes)
      if (veriRes.success) {//验证码成功后
        // 发送登录请求
        let loginRes = await loginApi({
          userName: this.username,
          password: this.password
        })
        console.log(loginRes)
        if (loginRes.success) {
          this.$alert("登录成功，跳转主页...")
          this.$store.dispatch("getUserAction")
          this.$router.push("/home")
        }
        // 清空输入框
        this.username = ""
        this.password = ""
        this.veri = ""
      }
    }
  },
  components: {
    bgCanvans,
    veri
  }
}
</script>
<style lang="less">
.content {
  position: relative;
  background: #0d1953;
}
.login_wrap {
  width: 600px;
  height: 450px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  h1 {
    text-align: center;
    color: white;
  }
  .el-form {
    margin-top: 20px;
  }
  .veri_wrap {
    display: flex;
    .el-input {
      width: 440px;
    }
  }
  .form_btn {
    display: flex;
    justify-content: space-between;
  }
}
</style>